<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <link rel="stylesheet" type="text/css" href="../node_modules/survey-core/survey-core.css" />
  <link rel="stylesheet" type="text/css" href="../node_modules/survey-creator-core/survey-creator-core.css" />
  <link rel="stylesheet" type="text/css" href="../node_modules/survey-creator-core/presets/index.css">
  <!-- <link rel="stylesheet" type="text/css" href="../build/survey-creator-js.min.css" /> -->
  <style>
        /*imitation of Tailwind CSS, bootstrap and other CSS frameworks (only for survey-creator-js)*/
        *,
        ::after,
        ::before {
            box-sizing: border-box;
        }
  </style>
  <script src="../node_modules/survey-core/survey.core.js"></script>
  <script src="../node_modules/survey-core/survey.i18n.js"></script>
  <script src="../node_modules/survey-core/themes/index.js"></script>
  <script src="../node_modules/survey-creator-core/survey-creator-core.js"></script>
  <script src="../node_modules/survey-creator-core/survey-creator-core.i18n.js"></script>
  <script src="../node_modules/survey-creator-core/presets/index.js"></script>
  <script src="../node_modules/survey-js-ui/survey-js-ui.js"></script>
  <script src="../build/survey-creator-js.js"></script>
  <script src="../build/survey-creator-js-presets.js"></script>
  <script src="./sc.js"></script>
  <script src="../node_modules/survey-creator-core/themes/test.js"></script>
</head>

<body spellcheck="false">
  <div id="survey-creator" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0;"></div>
</body>
<script>
  window.addEventListener("DOMContentLoaded", () => {
    window.surveyJSFramework = "react";
    SurveyCreatorCore.registerSurveyTheme(SurveyTheme);
    SurveyCreatorCore.registerCreatorTheme(SurveyCreatorTheme.Test);
    const creator = new SurveyCreator.SurveyCreator({ expandCollapseButtonVisibility: "never", showLogicTab: true, showTranslationTab: true, showJSONEditorTab: false });
    creator.applyCreatorTheme(SurveyCreatorTheme.Test);
    creator.tabResponsivenessMode = "menu";
    creator["animationEnabled"] = false;
    window["Survey"].settings.animationEnabled = false;
    creator.allowZoom = false;
    window.creator = creator;
    new SurveyCreatorCorePresets.TabPresetsPlugin(creator);

    class SurveyCreatorRenderComponent extends SurveyUI.Component {
      constructor(props) {
        super(props);
        this.state = { creator: creator };
        window.updateCreatorModel = (options, json) => {
          window.prevCreator = window.creator;
          const creator = new SurveyCreator.SurveyCreator(options);
          creator.applyCreatorTheme(SurveyCreatorTheme.Test);
          creator.JSON = json;
          this.setState({ creator });
          creator.tabResponsivenessMode = "menu";
          creator["animationEnabled"] = false;
          creator.allowZoom = false;
          window.creator = creator;
          new SurveyCreatorCorePresets.TabPresetsPlugin(creator);
        }
      }
      render() {
        return SurveyUI.createElement(SurveyCreator.SurveyCreatorComponent, { creator: this.state.creator });
      }
    }
    // SurveyCreator.renderSurveyCreator(creator, document.getElementById("survey-creator"));
    const survey = SurveyUI.createElement(SurveyCreatorRenderComponent, { creator });
    SurveyUI.render(survey, document.getElementById("survey-creator"));
  })
</script>

</html>